<template>
  <transition name="slide">
    <div class="page-container--child container-flex">
      <div ref="wrapper" class="items-wrapper">
        <div ref="item" class="item" :style="itemAniStyle" @click="run"></div>
      </div>
      <router-view></router-view>
    </div>
  </transition>
</template>
<script>
export default {
  components: {
  },
  data() {
    return {
      itemAniStyle: {
        transform: ''
      },
      width: 0,
      height: 0,
      maxX: 0,
      maxY: 0,
      dK: 0.0,
      dB: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.width = this.$refs.wrapper.clientWidth - 50
      this.height = this.$refs.wrapper.clientHeight - 50
      this.dK = Math.random() * 5
    })
    let $this = this
    this.$refs.item.addEventListener('transitionend', () => {
      debugger
      var dK = $this.dK
      if (dK > 0) {
        $this.dB = $this.dK * $this.width + $this.dB
      } else {
        $this.dB = $this.dB
      }
      $this.dK = 0 - $this.dK
      $this.run()
    })
  },
  methods: {
    run() {
      var maxX = 0
      var maxY = 0
      var dK = this.dK
      var dB = this.dB
      maxY = dK * this.width + dB
      maxX = (this.height - dB) / dK

      this.maxX = Math.min(maxX, this.width)
      this.maxY = Math.min(maxY, this.height)
      this.itemAniStyle = {
        transform: `translate3d(${this.maxX}px, ${this.maxY}px, 0)`
      }
    },
    onEnd() {
      debugger
    }
  }
}
</script>
<style lang="scss" scoped>
  .items-wrapper {
    width: 100%;
    height: 500px;
    border: solid 1px red;
  }

  .item {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: red;
    transition: all ease 1s;

  }

</style>